The Box Model

This is the first div

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis praesentium iste accusantium repudiandae odit deserunt nostrum sed, ea illum, consequuntur voluptatem? Natus, rerum!. See its box model.

This is the second div

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis praesentium iste accusantium repudiandae odit deserunt nostrum sed, ea illum, consequuntur voluptatem? Natus, rerum!

The final Width and Height of the element is calculated as:

Width width + padding-left + padding-right + border-left + border-right
Height height + padding-top + padding-bottom + border-top + border-bottom

where 'width' and 'height' are the properties set in the CSS.

This is also the reason that setting width to 100% of child, causes it to overflow as the padding and borders increase its width. To get around this, you can use the box-sizing property. Box sizing can have two values (other than the global values: inherit, unset etc. ):

  1. content-box
  2. border-box

The default in such problematic cases is often the content-box. Setting it to border-box sets the final width and height to be the one specified in the rules which helps with layout. Heck, you might as well use the universal rule to set everything to border-box:

* { box-sizing: border-box; }

This is the third div

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis praesentium iste accusantium repudiandae odit deserunt nostrum sed, ea illum, consequuntur voluptatem? Natus, rerum!

Observe the difference:

#second { padding: 0px 100px; } #third { box-sizing:border-box; padding: 0px 100px; }